.detailContent {
  @apply bg-white px-[32px] pt-[32px] box-border;
  &.fromWord {
    border-radius: 0 0 32px 32px;
  }
  .infoBlock {
    @apply flex flex-row items-center box-border;
    .avatar {
      width: 80px;
      height: 80px;
      @apply rounded-full object-cover block;
    }
    .info {
      @apply ml-[12px] gap-[12px] flex flex-col justify-center box-border;
      .name {
        @apply text-[#333333] text-[28px] font-500;
      }
      .concern {
        @apply text-[#999999] text-[24px];
      }
    }
    .concernBtn {
      width: 144px;
      height: 56px;
      border: 2px solid #5278fd;
      @apply rounded-[30px] ml-auto text-[#5278FD] text-[28px] flex justify-center items-center box-border;
      &.concerned {
        border: 2px solid #dddddd;
        @apply text-light;
      }
    }
  }
  .noteTitle {
    line-height: 44px !important;
    @apply text-[#333333] text-[36px] font-500 mt-[34px];
  }
  .relatedWords {
    @apply box-border mt-[32px] flex flex-col gap-[12px];
  }
  .updateTime {
    @apply text-[#999999] text-[24px] mt-[32px];
  }
}
.recommands {
  @apply px-[32px] box-border bg-[#F7F7F7];
  .recommanLabel {
    @apply text-[#333333] text-[36px] font-500 pt-[32px] pb-[24px];
  }
  .recommandsList {
    @apply flex flex-row box-border gap-[10px];
    .recommandsPart {
      @apply flex-1 flex flex-col box-border gap-[10px];
    }
  }
}
.commentsLabel {
  @apply text-[#999999] py-[32px] text-[28px] box-border bg-white px-[32px];
  &.fromWord {
    background-color: inherit;
  }
}
.comments {
  @apply bg-white px-[32px];
  &.fromWord {
    @apply rounded-32px pt-32px;
  }
  .commentList {
    @apply box-border flex flex-col gap-32px;
  }
  .comment {
    @apply box-border;
    &:last-child {
      border-bottom: none;
    }
  }
}
.attatchments {
  @apply box-border relative box-border;
  .swiper {
    @apply box-border !w-page;
    .swiperItem {
      @apply w-full h-full;
    }
    .swiperImage {
      @apply object-center block mx-auto;
    }
  }
  .attatchmentsBottom {
    width: 80px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    @apply text-[#FFFFFF] text-[24px] box-border flex flex-row justify-center items-center absolute bottom-[32px] right-[32px] rounded-[32px];
  }
}
.noteAnswer {
  border-bottom: 2px solid #f2f2f2;
  @apply pt-32px box-border;
}
